import CustomTable from "@/components/CustomTable/CustomTable.tsx";
import { ColumnProps } from "antd/es/table";
import { Ref, useEffect, useImperativeHandle, useState } from "react";
import { useOutletContext } from "react-router-dom";
import { Modal } from "antd";
import "./index.scss";
import InsertSystemCategory from "@/pages/system_management/system_category/insert_system_category.tsx";

function SystemCategory() {
  const { childRef } = useOutletContext<{ childRef: Ref<unknown> }>();
  const columns: Array<ColumnProps> = [
    {
      title: "编号",
      key: "index",
      dataIndex: "index",
    },
    {
      title: "板块",
      key: "plate",
      dataIndex: "plate",
    },
    {
      title: "反馈人",
      key: "feedbackPeople",
      dataIndex: "feedbackPeople",
    },
    {
      title: "反馈日期",
      key: "feedbackDate",
      dataIndex: "feedbackDate",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
    },
    {
      align: "center",
      title: "操作",
      key: "operate",
      render({ index }) {
        return (
          <i
            style={{ cursor: "pointer" }}
            className={"iconfont icon-quxiao"}
            onClick={() => {
              const result = tableList.filter(
                (i: {
                  index: number;
                  plate: string;
                  feedbackPeople: string;
                  feedbackDate: string;
                  status: string;
                }) => i.index != index,
              );
              setTableList(result);
            }}
          ></i>
        );
      },
    },
  ];

  const [tableList, setTableList] = useState(
    Array.from({ length: 100 }).map((_value, index) => ({
      index,
      plate: "板块" + index,
      feedbackPeople: "反馈人" + index,
      feedbackDate: "反馈日期" + index,
      status: "状态" + index,
    })),
  );

  const [isModalInsertOpenFlag, setIsModalInsertOpenFlag] = useState(false);

  useEffect(() => {}, [isModalInsertOpenFlag, tableList]);

  useImperativeHandle(childRef, () => ({
    openModal: () => setIsModalInsertOpenFlag(true),
  }));

  return (
    <>
      <CustomTable
        dataSource={tableList}
        columns={columns}
        rowKey={(record) => record.index}
      ></CustomTable>
      <Modal
        title={"反馈"}
        open={isModalInsertOpenFlag}
        onCancel={() => setIsModalInsertOpenFlag(false)}
        footer={null}
      >
        <InsertSystemCategory
          onOk={() => setIsModalInsertOpenFlag(false)}
        ></InsertSystemCategory>
      </Modal>
    </>
  );
}

export default SystemCategory;
